import { message } from "antd";
import { createRef, useState } from "react";




interface MusicBarProps {
  songs: API.SongVO[]
}

const MusicBar :React.FC<MusicBarProps> = ({songs})=>{

  //constructor
  const audio = createRef();
  const [volume ,setVolume] = useState(0.5); // 音量
  const [showVolume,setShowVolume] = useState(false);
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  

  const onStepSong =  (currentSongId:number, next:boolean = true) => {
    // * 赋值则递归调用，否则进行初始化操作
    if (!currentSongId) {
        currentSongId = songs.findIndex((item) => item.id === this.props.song.id);            
    }
    const step = next ? 1 : -1;
    const nextSong = songs[currentSongId+step];
    // 超出数组边界
    if (!nextSong) {
      return message.info('没歌放了喔(⊙_⊙)');
    }
    onChangeSong(nextSong.id)
        .then(res => {
            // * 无权播放歌曲 继续播放下一首/上一首
            if (!res) onStepSong(++currentSongId, next);
        })
  }

  return(

  );
};


export default MusicBar;